ASCII text
title: "Proposed system font stacks" topics: ["web", "typography", "fonts", "css", "design"] DATE: 2024-12-27 ---
I've seen Modern Font Stacks. I agree that there are many cases where system fonts are fine, but the stacks there have some problems, especially with GNU/Linux devices.
On GNU/Linux, there are usually two sets of metrically-compatible Microsoft font clones: Liberation and GNU FreeFont. They have a huge difference. Liberation are original designs, but not very good ones. FreeFont are descended from TeX fonts, so they look almost exactly like Helvetica, Times and Courier.
The stacks
GUI
system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Segoe UI", Inter, Cantarell, Ubuntu, "DejaVu Sans", "Bitstream Vera Sans", "Sans", "Helvetica Neue", "Helvetica", "Lucida Grande", sans-serif
These fonts are used by the OS and designed to be pleasant to read at any size, and have features such as weights.
Note how the intent is to avoid Arial and Liberation fonts, which are not very pleasant.
system-uiis a standard, but not all browsers support it.-apple-systemandBlinkMacSystemFontare pre-standard names for the system font that only work on Apple devices.Roboto is the font in Android and some GNU/Linux distributions.
Noto Sans is the fallback font for Roboto, as well as the font of KDE.
Segoe UI is the font of Windows.
Inter will likely be the font of GNOME in the future.
Cantarell is the font of GNOME (at least until they change it to Inter).
Ubuntu is the font of Ubuntu (obviously).
DejaVu Sans was popular on many Unixes in the past.
Bitstream Vera Sans is the font DejaVu Sans was based on.
Sans usually refers to one of the above two fonts on GNU/Linux.
Helvetica Neue was the old font of MacOS and iOS.
Helvetica was the even older font of iOS.
Lucida Grande was the even older font of MacOS.
sans-serif is the generic sans-serif font.
Transitional serif
Charter, "Bitstream Charter", "Source Serif 4", "Source Serif Pro", source-serif-pro, "Noto Serif", "FreeSerif", "Nimbus Roman", "Times New Roman", "Times", serif
Transitional serifs appeared around 1750 and feature medium contrast.
The intent here is also to avoid Liberation Serif, so FreeSerif/Nimbus Roman (which are an actual clone of Times) are preferred to Times New Roman which falls back to Liberation Serif on most GNU/Linux distributions. In my opinion Cambria, used in the original Modern Font Stacks, is not a very nice font.
Old style serif
Garamond, Palatino, "Palatino Linotype", "URW Palladio L", "Book Antiqua", "URW Bookman L", Bookman, P052, C059, serif;
Old style serifs appeared early, in the Renaissance period, and were developed from calligraphy.
Humanist sans
Cantarell, "Gill Sans Nova", "Gill Sans", "Gill Sans MT", Lato, "Source Sans Pro", "Source Sans 3", source-sans-pro, Skeena, Candara, Ubuntu, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", sans-serif
Humanist sans serifs, unlike neo-grotesques, have rounder shapes and more stroke contrast, and usually, true italics.
This is very different from the Modern Font Stacks one. I don't like the idea of using Ubuntu when Cantarell and Lato exist, which are much closer to a humanist font that isn't very unusual.
Geometric sans
"Futura PT", "Futura LT", Futura, Lexend, "Readex Pro", Avenir, "Avenir Next", "Century Gothic", "Avant Garde", "URW Gothic", sans-serif
Geometric sans serifs are usually based on circles and straight lines. They first appeared in the 1920s.
Again, I've included some free fonts that don't suck.
Neo-grotesque GUI
Roboto, Inter, "SF Pro", Aptos, Geist, FreeSans, "Nimbus Sans", "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Neo-grotesque fonts are a category of sans-serif typefaces that have more complex shapes than geometric fonts, but lower contrast than humanist fonts. This stack prefers the more modern fonts which appeared in the digital era.
Yes, I'm avoiding excessive spreading of Inter.
Neo-grotesque (Swiss)
FreeSans, "Nimbus Sans", "Helvetica Neue", Helvetica, Aptos, Geist, Inter, Roboto, "SF Pro", "Microsoft Sans Serif", Arial, sans-serif
This prefers Helvetica or its clones, more classic neo-grotesque fonts.
Monospace (slab/typewriter)
"Courier Prime", FreeMono, "Cutive Mono", Nimbus Mono PS", "Courier New", Courier, monospace
Monospaced fonts have the same width for all characters. This has a preference for fonts like Courier which use slab serifs and originate from typewriters.
Monospace (sans/code)
ui-monospace, "Roboto Mono", "Source Code Pro", source-code-pro, "SF Mono", "IBM Plex Mono", Inconsolata, Menlo, Consolas, "Droid Sans Mono", "DMCA Sans Serif", "Hack", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace
This prefers sans-serif monospace fonts that are not too quirky and are designed for technical applications.
FuN MoNoSpAcE
"Cascadia Code", "Fira Code", "Fira Mono", "JetBrains Mono", "Ubuntu Mono", "Operator Mono", "Roboto Mono", "Source Code Pro", "SF Mono", "IBM Plex Mono", "Inconsolata", "Menlo", "Consolas", "Droid Sans Mono", "DMCA Sans Serif", "Hack", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace
Of course, this prefers "fun" coding fonts with script italics, low f bar, unusual digits, and let's not forget ligatures!
I-wanna-be-a-mac
"SF Pro", apple-system, BlinkMacSystemFont, "San Francisco", Inter, Roboto, Geist, FreeSans, "Nimbus Sans", "Helvetica Neue", Helvetica, "Arial Nova", "Arial", sans-serif
This is for all who want to be like Apple - that is the major reason they prefer Inter.
I-wanna-be-a-mac mono
"SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Geist Mono", "Fira Mono", "Fira Code", Hack, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Menlo, Consolas, monospace
This copies SF Mono.
Industrial
"D-DIN", Bahnschrift, Grandview, "DIN Alternate", "FF DIN", "URW DIN", DIN, "Alte DIN", "Alte DIN 1451", "Alte DIN 1451 Mittelschrift", Barlow, "SF Compact", "SF Pro", Inter, Roboto, sans-serif
Industrial typefaces generally use straight lines instead of ellipses, and are often used in technical applications or signage.
This prefers the DIN family which is the font used for road signs in Germany.
Rounded
"SF Pro Rounded", "Hiragino Maru Githic", "Quicksand", "Varela Round", "Nunito", "Lato", "Arial Rounded MT Bold", sans-serif
Rounded fonts are sans-serif but have rounded terminals.
Slab serif
"Roboto Slab", "Rockwell Nova", "Rockwell", "Sitka Small", "Noto Serif", serif
Slab serifs have more blocky serifs.
Didone
Didot, "Bodoni MT", "Noto Serif Display", "Playfair Display", "Abril Fatface", "URW Palladio L", "Noto Serif", serif
Didone serifs have very high contrast and thin serifs.
Narrow sans (display)
Oswald, Anton, Impact, "Arial Narrow", sans-serif
Bold, narrow sans-serif fonts, only for headings.
Print handwriting
"Segoe Print", "Bradley Hand", Comic Neue", "Comic Sans MS", "Comic Sans", "TSCu_Comic", "Coming Soon", "Knewave", casual, cursive
These mimic handwriting but without cursive (joined) letters.
Cursive
"Segoe Script", "Lucida Handwriting", "Dancing Script", cursive
These mimic cursive (joined) handwriting.
Semi-humanist sans???
"DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif
Wide, with good readability especially at small sizes on low-resolution screens.
Condensed semi-humanist sans???
"DejaVu Sans Condensed", Tahoma, sans-serif
Same as above, but not so wide.
1
---
2
title: "Proposed system font stacks"
3
topics: ["web", "typography", "fonts", "css", "design"]
4
DATE: 2024-12-27
5
---
6
I've seen [Modern Font Stacks](https://modernfontstacks.com/). I agree that there are many cases
8
where system fonts are fine, but the stacks there have some problems, especially with GNU/Linux
9
devices.
10
On GNU/Linux, there are usually two sets of metrically-compatible Microsoft font clones:
12
Liberation and GNU FreeFont. They have a huge difference. Liberation are original designs, but
13
not very good ones. FreeFont are descended from TeX fonts, so they look almost exactly like
14
Helvetica, Times and Courier.
15
## The stacks
17
### GUI
19
```
21
system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Segoe UI", Inter, Cantarell,
22
Ubuntu, "DejaVu Sans", "Bitstream Vera Sans", "Sans", "Helvetica Neue", "Helvetica",
23
"Lucida Grande", sans-serif
24
```
25
These fonts are used by the OS and designed to be pleasant to read at any size, and have features
27
such as weights.
28
Note how the intent is to avoid Arial and Liberation fonts, which are not very pleasant.
30
* `system-ui` is a standard, but not all browsers support it.
32
* `-apple-system` and `BlinkMacSystemFont` are pre-standard names for the system font that only
33
work on Apple devices.
34
* Roboto is the font in Android and some GNU/Linux distributions.
35
* Noto Sans is the fallback font for Roboto, as well as the font of KDE.
36
* Segoe UI is the font of Windows.
37
* Inter will likely be the font of GNOME in the future.
38
* Cantarell is the font of GNOME (at least until they change it to Inter).
39
* Ubuntu is the font of Ubuntu (obviously).
40
* DejaVu Sans was popular on many Unixes in the past.
41
* Bitstream Vera Sans is the font DejaVu Sans was based on.
42
* Sans usually refers to one of the above two fonts on GNU/Linux.
43
* Helvetica Neue was the old font of MacOS and iOS.
44
* Helvetica was the even older font of iOS.
45
* Lucida Grande was the even older font of MacOS.
46
* sans-serif is the generic sans-serif font.
47
### Transitional serif
49
```
51
Charter, "Bitstream Charter", "Source Serif 4", "Source Serif Pro", source-serif-pro, "Noto Serif",
52
"FreeSerif", "Nimbus Roman", "Times New Roman", "Times", serif
53
```
54
Transitional serifs appeared around 1750 and feature medium contrast.
56
The intent here is also to avoid Liberation Serif, so FreeSerif/Nimbus Roman (which are an
58
actual clone of Times) are preferred to Times New Roman which falls back to Liberation Serif
59
on most GNU/Linux distributions. In my opinion Cambria, used in the original Modern Font Stacks,
60
is not a very nice font.
61
### Old style serif
63
```
65
Garamond, Palatino, "Palatino Linotype", "URW Palladio L", "Book Antiqua", "URW Bookman L",
66
Bookman, P052, C059, serif;
67
```
68
Old style serifs appeared early, in the Renaissance period, and were developed from calligraphy.
70
### Humanist sans
72
```
74
Cantarell, "Gill Sans Nova", "Gill Sans", "Gill Sans MT", Lato, "Source Sans Pro", "Source Sans 3",
75
source-sans-pro, Skeena, Candara, Ubuntu, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
76
"Trebuchet MS", sans-serif
77
```
78
Humanist sans serifs, unlike neo-grotesques, have rounder shapes and more stroke contrast, and
80
usually, true italics.
81
This is very different from the Modern Font Stacks one. I don't like the idea of using Ubuntu when
83
Cantarell and Lato exist, which are much closer to a humanist font that isn't very unusual.
84
### Geometric sans
86
```
88
"Futura PT", "Futura LT", Futura, Lexend, "Readex Pro", Avenir, "Avenir Next", "Century Gothic",
89
"Avant Garde", "URW Gothic", sans-serif
90
```
91
Geometric sans serifs are usually based on circles and straight lines. They first appeared in the
93
1920s.
94
Again, I've included some free fonts that don't suck.
96
### Neo-grotesque GUI
98
```
100
Roboto, Inter, "SF Pro", Aptos, Geist, FreeSans, "Nimbus Sans", "Helvetica Neue", system-ui, -apple-system,
101
BlinkMacSystemFont, sans-serif
102
```
103
Neo-grotesque fonts are a category of sans-serif typefaces that have more complex shapes than
105
geometric fonts, but lower contrast than humanist fonts. This stack prefers the more modern
106
fonts which appeared in the digital era.
107
Yes, I'm avoiding excessive spreading of Inter.
109
### Neo-grotesque (Swiss)
111
```
113
FreeSans, "Nimbus Sans", "Helvetica Neue", Helvetica, Aptos, Geist, Inter, Roboto, "SF Pro",
114
"Microsoft Sans Serif", Arial, sans-serif
115
```
116
This prefers Helvetica or its clones, more classic neo-grotesque fonts.
118
### Monospace (slab/typewriter)
120
```
122
"Courier Prime", FreeMono, "Cutive Mono", Nimbus Mono PS", "Courier New", Courier, monospace
123
```
124
Monospaced fonts have the same width for all characters. This has a preference for fonts like
126
Courier which use slab serifs and originate from typewriters.
127
### Monospace (sans/code)
129
```
131
ui-monospace, "Roboto Mono", "Source Code Pro", source-code-pro, "SF Mono", "IBM Plex Mono",
132
Inconsolata, Menlo, Consolas, "Droid Sans Mono", "DMCA Sans Serif", "Hack", "DejaVu Sans Mono",
133
"Bitstream Vera Sans Mono", monospace
134
```
135
This prefers sans-serif monospace fonts that are not too quirky and are designed for technical
137
applications.
138
### FuN MoNoSpAcE
140
```
142
"Cascadia Code", "Fira Code", "Fira Mono", "JetBrains Mono", "Ubuntu Mono", "Operator Mono",
143
"Roboto Mono", "Source Code Pro", "SF Mono", "IBM Plex Mono", "Inconsolata", "Menlo", "Consolas",
144
"Droid Sans Mono", "DMCA Sans Serif", "Hack", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
145
monospace
146
```
147
Of course, this prefers "fun" coding fonts with script italics, low f bar, unusual digits, and
149
let's not forget ligatures!
150
### I-wanna-be-a-mac
152
```
154
"SF Pro", apple-system, BlinkMacSystemFont, "San Francisco", Inter, Roboto, Geist, FreeSans,
155
"Nimbus Sans", "Helvetica Neue", Helvetica, "Arial Nova", "Arial", sans-serif
156
```
157
This is for all who want to be like Apple - that is the major reason they prefer Inter.
159
### I-wanna-be-a-mac mono
161
```
163
"SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Geist Mono", "Fira Mono", "Fira Code",
164
Hack, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Menlo, Consolas, monospace
165
```
166
This copies SF Mono.
168
### Industrial
170
```
172
"D-DIN", Bahnschrift, Grandview, "DIN Alternate", "FF DIN", "URW DIN", DIN, "Alte DIN", "Alte DIN 1451",
173
"Alte DIN 1451 Mittelschrift", Barlow, "SF Compact", "SF Pro", Inter, Roboto, sans-serif
174
```
175
Industrial typefaces generally use straight lines instead of ellipses, and are often used in
177
technical applications or signage.
178
This prefers the DIN family which is the font used for road signs in Germany.
180
### Rounded
182
```
184
"SF Pro Rounded", "Hiragino Maru Githic", "Quicksand", "Varela Round", "Nunito", "Lato",
185
"Arial Rounded MT Bold", sans-serif
186
```
187
Rounded fonts are sans-serif but have rounded terminals.
189
### Slab serif
191
```
193
"Roboto Slab", "Rockwell Nova", "Rockwell", "Sitka Small", "Noto Serif", serif
194
```
195
Slab serifs have more blocky serifs.
197
### Didone
199
```
201
Didot, "Bodoni MT", "Noto Serif Display", "Playfair Display", "Abril Fatface", "URW Palladio L",
202
"Noto Serif", serif
203
```
204
Didone serifs have very high contrast and thin serifs.
206
### Narrow sans (display)
208
```
210
Oswald, Anton, Impact, "Arial Narrow", sans-serif
211
```
212
Bold, narrow sans-serif fonts, only for headings.
214
### Print handwriting
216
```
218
"Segoe Print", "Bradley Hand", Comic Neue", "Comic Sans MS", "Comic Sans", "TSCu_Comic",
219
"Coming Soon", "Knewave", casual, cursive
220
```
221
These mimic handwriting but without cursive (joined) letters.
223
### Cursive
225
```
227
"Segoe Script", "Lucida Handwriting", "Dancing Script", cursive
228
```
229
These mimic cursive (joined) handwriting.
231
### Semi-humanist sans???
233
```
235
"DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif
236
```
237
Wide, with good readability especially at small sizes on low-resolution screens.
239
### Condensed semi-humanist sans???
241
```
243
"DejaVu Sans Condensed", Tahoma, sans-serif
244
```
245
Same as above, but not so wide.
247